<template>
  <div ref="FundsSpendingDetails" class="_wz_FundsSpendingDetails">
    <Card :bordered="true">
      <p slot="title">列表</p>
      <Table stripe highlight-row ref="table" :loading="tableLoading" border :columns="columns2" :data="tableData" :height="tableHeight"></Table>
    </Card>
  </div>
</template>
<script>

  export default {
    props: ["summaryData"],//接收来自父组件的数据
    data() {
      return {
        tableLoading: true,//表格加载
        columns2: [//表格表头数据
          {title: '类别', minWidth: 180, align: 'center', key: 'planItemName'},
          {
            title: '月份', align: 'center',
            children: [
              {
                title: '一月', align: 'center', children: [
                  {title: '提取金额', minWidth: 86, key: 'expenditureExtractAmount_1'},
                  {title: '支出金额', minWidth: 86, key: 'expenditureAmount_1'},
                ]
              },
              {
                title: '二月', align: 'center', children: [
                  {title: '提取金额', minWidth: 86, key: 'expenditureExtractAmount_2'},
                  {title: '支出金额', minWidth: 86, key: 'expenditureAmount_2'},
                ]
              },
              {
                title: '三月', align: 'center', children: [
                  {title: '提取金额', minWidth: 86, key: 'expenditureExtractAmount_3'},
                  {title: '支出金额', minWidth: 86, key: 'expenditureAmount_3'},
                ]
              },
              {
                title: '四月', align: 'center', children: [
                  {title: '提取金额', minWidth: 86, key: 'expenditureExtractAmount_4'},
                  {title: '支出金额', minWidth: 86, key: 'expenditureAmount_4'},
                ]
              },
              {
                title: '五月', align: 'center', children: [
                  {title: '提取金额', minWidth: 86, key: 'expenditureExtractAmount_5'},
                  {title: '支出金额', minWidth: 86, key: 'expenditureAmount_5'},
                ]
              },
              {
                title: '六月', align: 'center', children: [
                  {title: '提取金额', minWidth: 86, key: 'expenditureExtractAmount_6'},
                  {title: '支出金额', minWidth: 86, key: 'expenditureAmount_6'},
                ]
              },
              {
                title: '七月', align: 'center', children: [
                  {title: '提取金额', minWidth: 86, key: 'expenditureExtractAmount_7'},
                  {title: '支出金额', minWidth: 86, key: 'expenditureAmount_7'},
                ]
              },
              {
                title: '八月', align: 'center', children: [
                  {title: '提取金额', minWidth: 86, key: 'expenditureExtractAmount_8'},
                  {title: '支出金额', minWidth: 86, key: 'expenditureAmount_8'},
                ]
              },
              {
                title: '九月', align: 'center', children: [
                  {title: '提取金额', minWidth: 86, key: 'expenditureExtractAmount_9'},
                  {title: '支出金额', minWidth: 86, key: 'expenditureAmount_9'},
                ]
              },
              {
                title: '十月', align: 'center', children: [
                  {title: '提取金额', minWidth: 86, key: 'expenditureExtractAmount_10'},
                  {title: '支出金额', minWidth: 86, key: 'expenditureAmount_10'},
                ]
              },
              {
                title: '十一月', align: 'center', children: [
                  {title: '提取金额', minWidth: 86, key: 'expenditureExtractAmount_11'},
                  {title: '支出金额', minWidth: 86, key: 'expenditureAmount_11'},
                ]
              },
              {
                title: '十二月', align: 'center', children: [
                  {title: '提取金额', minWidth: 86, key: 'expenditureExtractAmount_12'},
                  {title: '支出金额', minWidth: 86, key: 'expenditureAmount_12'},
                ]
              },
            ]
          },
          {
            title: '合计', align: 'center',
            children: [
              {
                title: '提取金额', minWidth: 86, render: (h, params) => {
                  var Total = params.row.expenditureExtractAmount_1 + params.row.expenditureExtractAmount_2 + params.row.expenditureExtractAmount_3 + params.row.expenditureExtractAmount_4 + params.row.expenditureExtractAmount_5 + params.row.expenditureExtractAmount_6 + params.row.expenditureExtractAmount_7 + params.row.expenditureExtractAmount_8 + params.row.expenditureExtractAmount_9 + params.row.expenditureExtractAmount_10 + params.row.expenditureExtractAmount_11 + params.row.expenditureExtractAmount_12;
                  return h('span', Total + ' 万元');
                }
              },
              {
                title: '支出金额', minWidth: 86, render: (h, params) => {
                  var Total = params.row.expenditureAmount_1 + params.row.expenditureAmount_2 + params.row.expenditureAmount_3 + params.row.expenditureAmount_4 + params.row.expenditureAmount_5 + params.row.expenditureAmount_6 + params.row.expenditureAmount_7 + params.row.expenditureAmount_8 + params.row.expenditureAmount_9 + params.row.expenditureAmount_10 + params.row.expenditureAmount_11 + params.row.expenditureAmount_12;
                  return h('span', Total + ' 万元');
                }
              },
            ]
          },


          //
        ],
        tableHeight: 400,
        tableData: [],//表格数据
      }
    },
    beforeCreate() {//beforeCreate创建前状态

    },
    created() {//created创建完毕状态
    },
    beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

    },
    mounted() {//mounted 挂载结束状态
      var that = this;
      that.tableLoadData();

      that.$nextTick(function () {
        var tabHeight = 0;
        if (!!localStorage.getItem('systemStyle')) {
          var systemStyle = JSON.parse(localStorage.getItem('systemStyle'));
          tabHeight = !!systemStyle.multiTabbed ? 32 : 0;
        }
        that.tableHeight = window.innerHeight - 51 - 32 - 38 - 10 - 51 - 32 - tabHeight;
        window.onresize = function () {
          that.tableHeight = window.innerHeight - 51 - 32 - 38 - 10 - 51 - 32 - tabHeight;
        };
      })

    },
    methods: {//执行的方法
      tableLoadData() {//加载表格数据
        var that = this;
        that.tableLoading = true;//加载
        that.axios.get(that.apiUrl.safetyBudgetExpenditureStatistics, {params: {planId: that.summaryData.id}})
        .then(res => {
          if (!!res) {
            that.tableLoading = false;
            that.tableData = res.data.data;//返回数据
          }
        }).catch(err => {
          console.log("失败", err)
        })
      },
    },
    watch: {//监听

    },
    beforeUpdate() {//beforeUpdate 更新前状态

    },
    updated() {//updated 更新完成状态

    },
    beforeDestroy() {//beforeDestroy 销毁前状态

    },
    destroyed() {//destroyed 销毁完成状态

    }
  }
</script>
<style lang="less">
  ._wz_FundsSpendingDetails {

  }
</style>
